extends ../layout

block content
  style.
    #map {
      width: 100%;
      height: 500px;
    }

  .pb-2.mt-2.mb-4.border-bottom
    h2
      i.fab.fa-google.fa-sm
      | Google Maps API

  .btn-group.d-flex(role='group')
    a.btn.btn-primary(href='https://developers.google.com/maps/documentation/javascript/tutorial', target='_blank').w-100
      i.far.fa-check-square.fa-sm
      | Getting Started
    a.btn.btn-primary(href='https://console.developers.google.com/apis/dashboard', target='_blank').w-100
      i.fas.fa-laptop.fa-sm
      | API Console

  h3 Markers Example

  #map

  script.
    var map;
    var superchargers = [
      {
        location: 'Fremont',
        latitude: 37.49267,
        longitude: -121.94409
      },
      {
        location: 'Folsom',
        latitude: 38.64392,
        longitude: -121.18621
      },
      {
        location: 'Gilroy',
        latitude: 37.02615,
        longitude: -121.56487
      },
      {
        location: 'Harris Ranch',
        latitude: 36.25316,
        longitude: -120.23853
      },
      {
        location: 'Mt. Shasta',
        latitude: 41.30981,
        longitude: -122.31766
      },
      {
        location: 'Roseville',
        latitude: 38.77344,
        longitude: -121.26928
      },
      {
        location: 'Truckee',
        latitude: 39.32720,
        longitude: -120.20643
      },
      {
        location: 'Vacaville',
        latitude: 38.36720,
        longitude: -121.95601
      },
      {
        location: 'Atascadero',
        latitude: 35.48640,
        longitude: -120.66558
      },
      {
        location: 'Barstow',
        latitude: 34.89120,
        longitude: -116.99910
      },
      {
        location: 'Buellton',
        latitude: 34.61545,
        longitude: -120.18856
      },
      {
        location: 'Cabazon',
        latitude: 33.92967,
        longitude: -116.81649
      },
      {
        location: 'Culver City',
        latitude: 33.98465,
        longitude: -118.39505
      },
      {
        location: 'El Centro',
        latitude: 32.76200,
        longitude: -115.53197
      },
      {
        location: 'Indio',
        latitude: 33.74272,
        longitude: -116.21316
      },
      {
        location: 'Los Angeles',
        latitude: 33.92142,
        longitude: -118.32982
      },
      {
        location: 'Needles',
        latitude: 34.85083,
        longitude: -114.62414
      },

      {
        location: 'Oxnard',
        latitude: 34.24075,
        longitude: -119.17699
      },
      {
        location: 'Rancho Cucamonga',
        latitude: 34.11348,
        longitude: -117.53257
      },
      {
        location: 'San Juan Capistrano',
        latitude: 33.49835,
        longitude: -117.66287
      },
      {
        location: 'Tejon Ranch',
        latitude: 34.98661,
        longitude: -118.94630
      }
    ];

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 36.0907578, lng: -119.5948303 },
        zoom: 7
      });

      superchargers.forEach(function(sc) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(sc.latitude, sc.longitude),
          icon: {
            url: '',
            scaledSize: new google.maps.Size(23, 33)
          },
          map: map,
          title: sc.location,
          animation: google.maps.Animation.DROP
        });
      });
    }

  script(async defer src=`https://maps.googleapis.com/maps/api/js?key=${google_map_api_key}&callback=initMap`)
